<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<%@ include file = "head.jsp" %>

<title>위치검색</title>
<link rel="stylesheet" href="assets/css/search_result.css">
</head>

<body>
	<!-- 상단 해더 바 -->
	<nav class="navbar navbar-fixed-top" role="navigation">
		<div class="nav_content text-center">
			<div class="nav_menu_btn pull-left text-center">
				<a class="back_btn" onclick="history.back();"><i class="fa fa-arrow-left"></i></a>
			</div>
			<span class="page_title"><strong>위치검색</strong></span>
		</div>
	</nav>
	<!-- 상단 해더 끝 -->

	<div id='glayLayer'></div>
	<div id='overLayer'></div>

	<form class="form-signin" method="post" action="index.jsp">
		<div class="panel-group">
			<!-- 내용에 대한 출력 -->


			
		</div>
	</form>

	<!-- Javascript -->
	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script id="android"></script>
	<script src="assets/js/db.js"></script>
	<script src="assets/js/jquery.xml2json.js"></script>
	<script type="text/javascript">
		$(function() {
			// 링크를 클릭한 경우
			$(document).on('click', '.map', function() {
				// 배경 레이어를 화면에 표시한다.
				$("#glayLayer").fadeIn(300);

				// 이미지 레어를 화면에 표시한다.
				$("#overLayer").fadeIn(200);

				// 링크가 갖는 href 속성의 주소를 <img>태그에 설정하여 이미지 레이어에 출력
				$("#overLayer").html("<img src='" + $(this).val() + "' />");

				// 링크의 페이지 이동 중단.
				return false;
			});

			// (화면에 표시된) 배경 레이어를 클릭한 경우
			$(document).on('click', "#glayLayer", function() {
				// 배경 레이어의 숨김
				$(this).fadeOut(300);

				// 이미지 레이어의 숨김
				$("#overLayer").fadeOut(200);
			});
			
			var naver_url = "http://openapi.naver.com/search?key=83094044549bcd85ea2214d754f913f1&query=" + encodeURI(sessionStorage[sessionStorage["flag"]]) + "&target=local&start=1&display=10";
			
			$.ajax({
				url : "proxy.jsp",
				data : {"url" : naver_url},
				dataType : "xml",
				timeout : 30000,
				cache : false,
				success : function(req) {
					$(".panel-group").empty();
					// item태그의 자식들을 취득 --> R1~R10 --> 배열형태
					
					var json = $.xml2json(req);
					var t = '';
					
					for (var i=0; i < json.channel.item.length; i++) {
						var title = json.channel.item[i].title.replace(/<(\/)?([a-zA-Z]*)(\s[a-zA-Z]*=[^>]*)?(\s)*(\/)?>/ig, "");
						
						t += '<div class=list-case>';
						t += 	'<div class=content>';
						t += 		'<div class=panel-heading>';
						t += 			'<div class=panel-title>';
						t += 				'<a class="accordion-toggle list-style" data-toggle=collapse data-parent=#accordion href=#collapse' + i + '>';
						t += 					'<div class="thumbnail_map pull-left" id=thumbnail' + i + '>';
						t += 					'<img src="http://openapi.naver.com/map/getStaticMap?version=1.0&crs=NHN:128&center=' + json.channel.item[i].mapx + ',' + json.channel.item[i].mapy + '&level=10&w=100&h=100&maptype=default&markers=' + json.channel.item[i].mapx + ',' + json.channel.item[i].mapy + '&key=8a2d17c98fec8873eb768735df4bcf58&uri=blog.naver.com/crimwax" /></div>';
						t += 					'<div class=loca_info>';
						t += 						'<h4><strong>' + title + '</strong></h4>';
						t += 						'<div>';
						t += 							json.channel.item[i].address;
						t += 					'</div></div>';
						t += 					'<div class=mark-sign><i class="fa fa-star fa-o-style"></i></div></a></div></div></div>';
						t += 	'<div id=collapse' + i + ' class="panel-collapse collapse collapse">';
						t += 		'<div class=panel-body>';
						t += '<input type=hidden value="' + title + '">';
						t += '<input type=hidden value="' + json.channel.item[i].address + '">';
						t += '<button id=' + i + ' class="list-btn1 btn btn-info sub_btn" value="' + json.channel.item[i].mapx + "," + json.channel.item[i].mapy + '">북마크</button>';
						t += '<button class="list-btn1 btn btn-warning map sub_btn" value="http://openapi.naver.com/map/getStaticMap?version=1.0&crs=NHN:128&center=' + json.channel.item[i].mapx + ',' + json.channel.item[i].mapy + '&level=10&w=280&h=400&maptype=default&markers=' + json.channel.item[i].mapx + ',' + json.channel.item[i].mapy + '&key=8a2d17c98fec8873eb768735df4bcf58&uri=blog.naver.com/crimwax">지도보기</button>';
						if (sessionStorage["flag"] == 'sl') {
							t += '<button class="list-btn2 btn btn-danger pull-right sub_btn" type=submit onclick="sessionStorage[\'sl\']=\'' + title + '\';sessionStorage[\'sg\']=\'' + json.channel.item[i].mapx + "," + json.channel.item[i].mapy + '\'">';
							t += '출발지로</button>';
						} else if (sessionStorage["flag"] == 'el') {
							t += '<button class="list-btn2 btn btn-danger pull-right sub_btn" type=submit onclick="sessionStorage[\'el\']=\'' + title + '\';sessionStorage[\'eg\']=\'' + json.channel.item[i].mapx + "," + json.channel.item[i].mapy + '\'">';
							t += '도착지로</button>';
						}
						t += '</div></div></div>';	
					}
					
					$('.panel-group').html(t);
					
					var userBrowser = navigator.userAgent.toLowerCase();

					if (userBrowser.indexOf("android") != -1){
						$('#android').attr("src", "assets/js/cordova.js");
						
						document.addEventListener("deviceready", onDeviceReady, false);
						
						function onDeviceReady() {
							init();
						}
					} else {
						init();
					}
				},
				error : function(xhr, status, error) {
					alert("status: " + status + " / error-code: " + xhr.status + " " + error);
				}
			});
		});
	</script>
</body>
</html>